<template>
  <view class="container">
    <FilterNavbar>
      <template #center>
        <view class="navbar-title"> {{ pageTitle }} </view>
      </template>
    </FilterNavbar>
    <ve-card type="none">
      <ve-cell label="支出单号">
        <text> {{ costInfo.code || '-' }}</text>
        <ve-tag
          v-if="costInfo.checkStatus"
          :color="getStatusType(costInfo.checkStatus).color"
          :background="getStatusType(costInfo.checkStatus).background"
          style="margin-left: 16rpx; font-size: 24rpx"
          :title="costInfo.checkStatusName"
        >
        </ve-tag>
      </ve-cell>
      <ve-cell label="支出单类型">
        {{ costInfo.costTypeName || '-' }}
        <ve-tag color="#191C27" background="#F2F3F5" style="margin-left: 16rpx; font-size: 24rpx" :title="costInfo.refCostTypeName">
        </ve-tag>
      </ve-cell>
      <ve-cell label="关联工单类型" v-if="costInfo.refCostType == 1">
        {{ costInfo.workTypeName || '-' }}
      </ve-cell>
      <ve-cell label="关联工单号" v-if="costInfo.refCostType == 1">
        <text class="link" @click="toWork" v-if="costInfo.workCode">{{ costInfo.workCode }} </text>
        <text v-else>-</text>
      </ve-cell>
      <ve-cell label="关联业务单号" v-if="costInfo.refCostType !== 3">
        <view v-if="costInfo.businessTypeName || costInfo.businessCode">
          <view>{{ costInfo.businessTypeName || '-' }}</view>
          <view class="link" @click="toOrder" v-if="costInfo.businessCode">{{ costInfo.businessCode }}</view>
          <text v-else>-</text>
        </view>
        <view v-else>-</view>
      </ve-cell>
      <ve-cell label="承租人信息" v-if="costInfo.refCostType == 1 || costInfo.refCostType == 2">
        <view v-if="costInfo.memberName || costInfo.memberPhone"> {{ costInfo.memberName }} {{ costInfo.memberPhone }} </view>
        <view v-else>-</view>
      </ve-cell>
      <ve-cell label="费用产生门店">{{ costInfo.feeOrgName || '-' }}</ve-cell>
    </ve-card>

    <ve-card type="none">
      <view class="fee_header">
        <view class="amount"
          >支出总额：<text class="amount-num">{{ costInfo.amount }}</text>
          <text class="amount-pic">元</text>
          <ve-tag
            :color="getPayType(costInfo.payStatus).color"
            :background="getPayType(costInfo.payStatus).background"
            style="margin-left: 16rpx; font-size: 24rpx"
            :title="costInfo.payStatusName"
          >
          </ve-tag>
        </view>
        <text class="num"> 共 {{ (costInfo.feeList && costInfo.feeList.length) || 0 }} 笔 </text>
      </view>
      <view class="feeItem" v-for="(item, index) in costInfo.feeList" :key="index" :class="{ line: index !== costInfo.feeList.length - 1 }">
        <view class="fee-title"> 费用明细 - {{ index + 1 }} </view>
        <ve-cell label="费用金额">
          <text>{{ item.amount || '0' }} 元</text>
        </ve-cell>
        <ve-cell label="支出费项">
          <text>{{ item.itemName || '-' }} </text>
        </ve-cell>
        <ve-cell label="费用发生时间">
          <text>{{ item.occurTime || '-' }} </text>
        </ve-cell>
        <ve-cell label="车辆信息">
          <text>{{ item.carId ? `${item.licenseNo} ${item.carModel}` : '-' }}</text>
        </ve-cell>
        <ve-cell label="附件">
          <view class="voucher_content">
            <pre-file v-for="(i, j) in item.fileIdList" :key="j" :id="i" />
          </view>
        </ve-cell>
      </view>
    </ve-card>

    <ve-card type="none">
      <ve-cell label="申请备注">{{ costInfo.remark || '-' }}</ve-cell>
    </ve-card>

    <ve-card type="none">
      <ve-cell label="收款方信息">
        <view v-if="costInfo.collectType == 1">
          <view>{{ costInfo.collectStaffName || '-' }} | {{ costInfo.collectStaffPhone || '-' }}</view>
          <view>{{ costInfo.collectStaffOrgName || '-' }}</view>
        </view>
        <view v-if="costInfo.collectType == 2">
          <view>{{ costInfo.collectTypeName || '-' }}</view>
          <view>{{ costInfo.collectIndustryName || '-' }}</view>
        </view>
        <view v-if="costInfo.collectType == 3">
          <view>{{ costInfo.collectTypeName || '-' }}</view>
          <view>{{ costInfo.collectSupplierName || '-' }}</view>
        </view>
      </ve-cell>
      <ve-cell label="收款账号">
        <view>
          <view>{{ costInfo.collectInExpWayName || '-' }}</view>
          <view>{{ costInfo.collectCard || '-' }}</view>
          <view v-if="costInfo.collectInExpWay === 1">{{ costInfo.collectBackName }}</view>
          <!-- <view>{{ costInfo.collectBackProvinceName || '-' }} | {{ costInfo.collectBackCityName || '-' }}</view> -->
        </view>
      </ve-cell>
      <ve-cell label="财务打款备注">
        <text> {{ costInfo.payRemark || '-' }} </text>
      </ve-cell>
      <ve-cell label="财务打款凭证" layout="vertical">
        <ve-upload disabled v-model="costInfo.payFileIdList"></ve-upload>
      </ve-cell>
      <ve-cell label="批量付款总金额">
        <view>
          {{ costInfo.batchPayRefList?.length > 1 ? unitVal(costInfo.batchPayAllAmount) : '-' }}
        </view>
      </ve-cell>
      <ve-cell label="关联的支出单">
        <view v-if="costInfo.batchPayRefList?.length > 1">
          <view v-for="(item, index) in costInfo.batchPayRefList" :key="index"> {{ item.code }}</view>
        </view>
        <view v-else> - </view>
      </ve-cell>
    </ve-card>

    <ve-card title="申请人" type="none">
      <ve-cell label="姓名">{{ costInfo.applyStaffName || '-' }}</ve-cell>
      <ve-cell label="手机号">{{ costInfo.applyStaffPhone || '-' }}</ve-cell>
      <ve-cell label="所属机构">{{ costInfo.applyStaffOrgName || '-' }}</ve-cell>
    </ve-card>

    <ve-card v-if="costInfo.ifOpenCheck" title="审批人" type="none">
      <view class="checkFlowData">
        <ua-timeline>
          <ua-timeline-item
            class="checkFlowItem"
            v-for="(item, index) in costInfo.checkFlowList"
            :key="index"
            size="7"
            color="#3072F6"
            lineColor="#F4F4F4"
          >
            <text class="postName">{{ item.postName }}</text>
            <view class="select-wrap">
              <view class="staff-info">
                <view class="name"> {{ item.staffName || '未选择人员' }}</view>
                <ve-tag
                  v-if="item.status"
                  :color="getStatusType(item.status).color"
                  :background="getStatusType(item.status).background"
                  style="margin-left: 16rpx; font-size: 24rpx"
                  :title="item.statusName"
                >
                </ve-tag>
                <text style="margin-left: 16rpx" v-else>{{ item.staffName ? '-' : '' }}</text>
                <text v-if="item.status == 4 || item.status == 6" style="margin-left: 16rpx">{{ item.updateTime || '-' }}</text>
              </view>
              <view v-if="item.status == 6" class="reason-content">
                <view class="reason-tip">驳回原因：</view>
                <ve-input type="textarea" disabled v-model="item.reason" placeholder="请输入备注" :maxlength="200" />
              </view>
            </view>
          </ua-timeline-item>
        </ua-timeline>
      </view>
    </ve-card>
    <ve-bottom-box v-if="routeQuery.type == 'checkType'">
      <ve-button status="danger" type="plain" size="long" @click="cancel">驳回</ve-button>
      <ve-button type="primary" size="long" :loading="okLoading" @click="agree">同意</ve-button>
    </ve-bottom-box>
  </view>
</template>

<script setup>
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import FilterNavbar from '@/components/FilterNavbar'
  import { getCostDetailApi, checkCostApi } from '@/api/cost/index'
  import { ref } from 'vue'
  import { usePermission } from '@/hooks/usePermission'
  import preFile from '@/components/upload-file/pre-file.vue'
  import uaTimeline from '@/components/ua-timeline/ua-timeline.vue'
  import uaTimelineItem from '@/components/ua-timeline-item/ua-timeline-item.vue'
  import { unitVal } from '@/utils'

  const pageTitle = ref('详情')
  const costInfo = ref({})
  const reason = ref()
  const routeQuery = ref()
  onLoad((option) => {
    routeQuery.value = option
    if (option.id) {
      getDetail(option.id)
    }
    if (routeQuery.value.type == 'checkType') {
      pageTitle.value = '审批'
    }

    uni.$on('refreshDetail', () => {
      getDetail(option.id)
    })
  })
  onUnload(() => {
    uni.$off('refreshDetail')
  })

  const getDetail = async (val) => {
    const res = await getCostDetailApi({ id: val })
    if (res.code === 200) {
      const data = res.result
      costInfo.value = data
      reason.value = data.checkFlowList?.find((i) => i.status == 6)?.reason
    }
  }
  const getStatusType = (record) => {
    let result = {
      color: '#8491A8',
      background: '#F2F3F5',
    }
    switch (record) {
      // 紫色
      case 1:
        result = {
          color: '#722ED1',
          background: '#F5E8FF',
        }
        break
      // 橙色
      case 2:
        result = {
          color: '#FF7D00',
          background: '#FFF7E8',
        }
        break
      // 蓝色
      case 3:
        result = {
          color: '#3072F6',
          background: '#E8F3FF',
        }
        break
      // 绿色
      case 4:
        result = {
          color: '#00B42A',
          background: '#E8FFEA',
        }
        break
      // 灰色
      case 5:
        result = {
          color: '#8491A8',
          background: '#F2F3F5',
        }
        break
      // 红色
      case 6:
        result = {
          color: '#F53F3F',
          background: '#FFECE8',
        }
        break
      // 灰色
      case 7:
        result = {
          color: '#8491A8',
          background: '#F2F3F5',
        }
        break
    }
    return result
  }
  const getPayType = (val) => {
    let result = {
      color: '#00B42A',
      background: '#E8FFEA',
    }
    switch (val) {
      case 0:
        result = {
          color: '#F53F3F',
          background: '#FFECE8',
        }
        break
      case 1:
        result = {
          color: '#00B42A',
          background: '#E8FFEA',
        }
        break
      case 9:
        result = {
          color: '#8491A8',
          background: '#F2F3F5',
        }
        break
    }
    return result
  }
  // 驳回
  const cancel = () => {
    uni.navigateTo({
      url: `/pages/operate-cost/detail/cancelReason?id=${costInfo.value.id}`,
    })
  }
  const okLoading = ref(false)
  // 同意审批
  const agree = () => {
    okLoading.value = true
    uni.showModal({
      title: '提示',
      content: '请再次确认是否同意审批？',
      success: function (res) {
        if (res.confirm) {
          handleAgree()
        } else {
          okLoading.value = false
        }
      },
    })
  }

  const handleAgree = () => {
    let params = {
      costId: costInfo.value.id,
      status: 4,
    }
    checkCostApi(params).then(() => {
      okLoading.value = false
      uni.showToast({
        icon: 'none',
        title: '已同意',
      })
      uni.$emit('refreshData')
      uni.navigateBack()
    })
  }
  // 跳转工单详情
  const toWork = () => {
    if (usePermission('svmsapp:work-order')) {
      uni.navigateTo({
        url: `/pages/work/workOrder/detail/index?workOrderId=${costInfo.value.workId}&orderId=${costInfo.value.businessId}&workCode=${costInfo.value.workCode}&orderType=${costInfo.value.businessType}`,
      })
    }
  }
  // 跳转业务单详情
  const toOrder = () => {
    if (costInfo.value.businessType === 1) {
      if (usePermission('svmsapp:order:short-order.view')) {
        uni.navigateTo({ url: `/pages/order/short-order/detail/index?id=${costInfo.value.businessId}` })
      }
    } else {
      if (usePermission('svmsapp:order:long-order.view')) {
        uni.navigateTo({ url: `/pages/order/long-order/detail/index?id=${costInfo.value.businessId}` })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100vw;
    height: auto;
    min-height: 100%;
    background: #f7f8fa;
    padding: 24rpx;
  }
  .link {
    color: #3072f6;
  }
  .fee_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 112rpx;
    border-bottom: 2rpx solid rgba(216, 216, 216, 0.3);

    .amount {
      color: #1e1e1e;
      font-size: 32rpx;
      font-weight: 400;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      max-width: 86%;

      .amount-num {
        color: #fe615a;
        font-size: 48rpx;
        font-weight: 600;
        line-height: 1;
        overflow: hidden;
        max-width: 220rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .amount-pic {
        color: #fe615a;
        font-size: 24rpx;
        font-weight: 400;
        margin-left: 8rpx;
      }
    }
  }
  .fee-title {
    color: #191c27;
    font-size: 32rpx;
    font-weight: 600;
    margin: 32rpx 0;
  }
  .line {
    border-bottom: 2rpx solid rgba(216, 216, 216, 0.3);
  }
  .checkFlowData {
    padding-bottom: 32rpx;
    .checkFlowItem {
      font-size: 30rpx;
      margin-top: 30rpx;
      padding-bottom: 0;
      .postName {
        color: #3072f6 !important;
        font-size: 30rpx;
        font-weight: 600;
      }
      .select-wrap {
        display: flex;
        flex-direction: column;
        .staff-info {
          display: flex;
          margin: 12rpx 0 18rpx;
          align-items: center;
          color: #8491a8;
          transform: translateY(16rpx);
        }
      }
      .reason-content {
        .reason-tip {
          margin: 10rpx 0;
          color: #9ea5bb;
        }
      }
    }
  }
  // 调整时间轴组件竖线位置
  :deep(.ve__timeline-item__line) {
    top: 22rpx;
  }
</style>
